import React, { Component } from 'react'
// 引入样式文件
import './css/02-maizuo.css'
// 引入按个子组件
import Film from './/maizuoComponent/Film'
import Cinema from './/maizuoComponent/Cinema'
import Center from './/maizuoComponent/Center'

export default class App extends Component {

    state = {
        list: [
            {
                id: 1,
                text: '电影'
            },
            {
                id: 2,
                text: '影院'
            },
            {
                id: 3,
                text: '我的'
            },
        ],
        currentIndex: 0
    }

    render() {
        return (
            <div>
                {/* 方案一： */}
                {/* {
                    this.state.currentIndex === 0 && <Film></Film>
                }
                {
                    this.state.currentIndex === 1 && <Cinema></Cinema>
                }
                {
                    this.state.currentIndex === 2 && <Center></Center>
                } */}

                {/* 方案二： */}
                {
                    // 处理函数() => 表达式支持函数调用
                    this.which()
                }


                <ul>
                    {this.state.list.map((item, index) =>
                        <li
                            className={
                                this.state.currentIndex === index ? 'active' : ''
                            }
                            onClick={() => { this.handleClick(index) }}
                            key={item.id}>{item.text}</li>
                    )}
                </ul>
            </div>
        )
    }

    handleClick = (index) => {
        this.setState({ currentIndex: index })
    }

    // 条件渲染组件函数
    which = () => {
        switch (this.state.currentIndex) {
            case 0:
                return <Film></Film>
            case 1:
                return <Cinema></Cinema>
            case 2:
                return <Center></Center>
            default:
                return null
        }
    }
}
